<template>
  <div>
    <div>
      <title-go-back :title="title"></title-go-back>
    </div>
    <div class="process">
      <div v-for="item in process">
        <div class="quan_quan">
          <i class="iconfont icon-fangzidaiquan"></i>
        </div>
        <div>{{item.title}}</div>
      </div>
    </div>
    <div class="form_content">
      <div class="jump_go">
        <div>区域</div>
        <div class="jump_go_right" @click="selectArea">
          <div>{{locationName}}</div>
          <div class="iconfont icon-icon--"></div>
        </div>
      </div>
      <div class="jump_go">
        <div>小区</div>
        <div><input v-model="formWeituoData.small_area" type="text" placeholder="填写小区名称"></div>
      </div>
      <div class="jump_go_bottom">
        <div>门牌号</div>
        <div class="jump_input"><input v-model="formWeituoData.door_card_num" type="text" placeholder="如：2号楼2单元303室">
        </div>
      </div>
      <!--<div class="jump_go_bottom">-->
      <!--<div>户型</div>-->
      <!--<div class="jump_go_right">-->
      <!--<div>3室2厅2卫</div>-->
      <!--<div class="iconfont icon-icon&#45;&#45;"></div>-->
      <!--</div>-->
      <!--</div>-->
      <div class="jump_go">
        <div>面积</div>
        <div class="jump_input"><input v-model="formWeituoData.acreage" type="text" placeholder="填写面积">
          <div>平米</div>
        </div>
      </div>
      <div class="jump_go">
        <div>户型</div>
        <div class="jump_go_right" @click="selectHuxing">
          <div>{{huxingName}}</div>
          <div class="iconfont icon-icon--"></div>
        </div>
      </div>
      <div class="jump_go">
        <div>朝向</div>
        <div class="jump_go_right" @click="selectOrientation">
          <div>{{orientationName}}</div>
          <div class="iconfont icon-icon--"></div>
        </div>
      </div>
      <div class="jump_go">
        <div>装修</div>
        <div class="jump_go_right" @click="selectRenovation">
          <div>{{renovationName}}</div>
          <div class="iconfont icon-icon--"></div>
        </div>
      </div>
      <div class="jump_go">
        <div>售价</div>
        <div class="jump_input"><input v-model="formWeituoData.sell" type="number" placeholder="填写售价">
          <div>万</div>
        </div>
      </div>
      <div class="jump_go">
        <div>姓名</div>
        <div class="jump_input"><input v-model="formWeituoData.full_name" type="text" placeholder="请填写您的姓名"></div>
      </div>
      <div class="jump_go">
        <div>手机号</div>
        <div class="jump_input"><input v-model="formWeituoData.phone" type="number" placeholder="请填写您的手机号"></div>
      </div>
      <div class="queren">
        <div @click="postEntrust">确认委托</div>
      </div>
    </div>
    <!--@touchmove.stop="handelTouchMove"-->
    <div @touchmove="handelTouchMove">
      <area-simulation :areaList="radioData.areaList" :closeSelect="closeSelect" v-if="areaShow"></area-simulation>
      <!--<change-modal  :areaList="radioData.areaList" :closeSelect="closeSelect" v-if="areaShow"></change-modal>-->
      <huxing-simulation :huxingList="radioData.houseType" :closeSelect="closeSelect"
                         v-if="huxingShow"></huxing-simulation>
      <orientation-simulation :orientationList="radioData.houseOrientation" :closeSelect="closeSelect"
                              v-if="orientationShow"></orientation-simulation>
      <renovation-simulation :renovationList="radioData.houseRenovation" :closeSelect="closeSelect"
                             v-if="renovationShow"></renovation-simulation>
    </div>
  </div>
</template>

<script>
  import TitleGoBack from '../../components/common/TitleGoBack';
  import AreaSimulation from '../../components/weiTuoCommon/AreaSimulation';
  import HuxingSimulation from '../../components/weiTuoCommon/HuxingSimulation';
  import OrientationSimulation from '../../components/weiTuoCommon/OrientationSimulation';
  import RenovationSimulation from '../../components/weiTuoCommon/RenovationSimulation';
  import {MessageBox} from 'mint-ui';
  import {houseRadio, entrustSubmit} from '../../axios/api';
  import {getCityName} from '../../assets/js/cache';

  export default {
    name: 'WeiTuoTwoHouse',
    data() {
      return {
        title: '委托出售',
        process: [
          {title: '在线委托'},
          {title: '电话核实'},
          {title: '房源上架'}
        ],
        radioData: {},
        areaShow: false,
        huxingShow: false,
        orientationShow: false,
        renovationShow: false,
        locationName: '',
        huxingName: '',
        orientationName: '',
        renovationName: '',
        formWeituoData: {
          area_code: '',//区域编码
          small_area: '',//小区名称
          door_card_num: '',//门牌号
          acreage: '',//面积
          ht_room_num: '',//房源类型
          orientation_id: '',//房源朝向
          renovation_id: '',//	装修类型
          sell: '',//售价
          full_name: '',//姓名
          phone: ''//手机号
        }
        // modalMessage:''
      }
    },
    filters: {},
    computed: {
      getArea() {
        return this.$store.getters.getAreaHouseRadio;
      },
      getHuxingRadio() {
        return this.$store.getters.getHuxingRadio;
      },
      getOrientationRadio() {
        return this.$store.getters.getOrientationRadio;
      },
      getRenovationRadio() {
        return this.$store.getters.getRenovationRadio;
      }

    },
    watch: {
      '$route'(to, from) {
        if (to.name !== 'NewHouseDetails') {
          this.closeSelect();
        }
      },
      radioData(curVal, oldVal) {
        this.setLocationName();
        this.setOrientationName();
        this.setHuxingName();
        this.setRenovationName();
      },
      getArea(curVal, oldVal) {
        this.setLocationName();
      },
      getHuxingRadio(curVal, oldVal) {
        this.setHuxingName();
      },
      getOrientationRadio(curVal, oldVal) {
        this.setOrientationName();
      },
      getRenovationRadio(curVal, oldVal) {
        this.setRenovationName();
      }

    },
    created() {
      this.getHouseRadio();
      this.$store.commit('setCircleOfFriendsTitle','房屋委托');
      this.$store.commit('setCircleOfFriendsDesc','房屋委托');
    },

    methods: {
      //确认委托
      postEntrust() {
        this.formWeituoData.area_code = this.getArea;
        this.formWeituoData.ht_room_num = this.getHuxingRadio;
        this.formWeituoData.orientation_id = this.getOrientationRadio;
        this.formWeituoData.renovation_id = this.getRenovationRadio;
        entrustSubmit(this.formWeituoData).then(res => {
          if (res.data.code === 1) {
            // 成功
            MessageBox.alert(res.data.msg).then(action => {
              this.formWeituoData = {};
              this.locationName = '';
              this.huxingName = '';
              this.orientationName = '';
              this.renovationName = '';
              this.$store.commit('clearData');
              this.$router.go(-1);
            });
          }
          if (res.data.code === 0) {
            //错误\
            MessageBox.alert(res.data.msg).then(action => {
            });
          }
        }).catch(err => {
          console.log(err);
        });
      },
      //点击弹出区域选择
      selectArea() {
        this.areaShow = true;
        document.getElementsByTagName('body')[0].style.overflow = 'hidden';
      },
      //点击弹出户型选择
      selectHuxing() {
        this.huxingShow = true;
        document.getElementsByTagName('body')[0].style.overflow = 'hidden';
      },
      //点击弹出朝向选择框
      selectOrientation() {
        this.orientationShow = true;
        document.getElementsByTagName('body')[0].style.overflow = 'hidden';
      },
      //点击弹出装修
      selectRenovation() {
        this.renovationShow = true;
        document.getElementsByTagName('body')[0].style.overflow = 'hidden';
      },
      //点击关闭弹窗
      closeSelect() {
        this.areaShow = false;
        this.huxingShow = false;
        this.orientationShow = false;
        this.renovationShow = false;
        document.getElementsByTagName('body')[0].style.overflow = 'auto';
      },
      //获取下拉 单选数据
      getHouseRadio() {
        houseRadio(getCityName().CODE).then(res => {
          // console.log(getCityName().CODE);
          // console.log(res);
          this.radioData = res.data;

        }).catch(err => {
          console.log(err);
        })
      },
      setLocationName() {
        let b = this.radioData.areaList.filter((item) => {
          return item.value === this.getArea;
        });
        if (b.length) {
          this.locationName = b[0].label;
          //label
        }
      },
      setOrientationName() {
        let b = this.radioData.houseOrientation.filter((item) => {
          return item.value === parseInt(this.getOrientationRadio)
        });
        if (b.length) {
          this.orientationName = b[0].label;
          //label
        }
      },
      setHuxingName() {
        let b = this.radioData.houseType.filter((item) => {
          return item.value === parseInt(this.getHuxingRadio)
        });
        if (b.length) {
          this.huxingName = b[0].label;
          //label
        }
      },
      setRenovationName() {
        let b = this.radioData.houseRenovation.filter((item) => {
          return item.value === parseInt(this.getRenovationRadio)
        });
        if (b.length) {
          this.renovationName = b[0].label;
          //label
        }
      },
      handelTouchMove(e) {
        e.preventDefault();
      }
    },
    components: {
      RenovationSimulation,
      OrientationSimulation,
      AreaSimulation,
      TitleGoBack,
      HuxingSimulation
    }
  }
</script>

<style scoped>
  .process {
    display: flex;
    padding: 20px 0;
    position: relative;
    background-color: #eee;
  }

  .process > div {
    width: calc(100% / 3);
    text-align: center;
    font-size: 0.9rem;
  }

  .quan_quan .iconfont {
    font-size: 2rem;
    z-index: 1;
  }

  .form_content {
    padding: 10px 0 0 0;
  }

  .jump_go {
    display: flex;
    justify-content: space-between;
    color: #666;
    font-size: 0.9rem;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    margin: 0 10px;
  }

  .jump_go_bottom {
    display: flex;
    justify-content: space-between;
    color: #666;
    font-size: 0.9rem;
    padding: 10px;
    border-bottom: 10px solid #eee;
  }

  .jump_go_bottom .jump_go_right {
    display: flex;
    color: #999;
  }

  .jump_go .jump_go_right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #999;
  }

  .jump_go .jump_go_right > div {
    color: #666666;
  }

  .jump_input {
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    /*display: flex;*/
  }

  .jump_input > div {
    margin-left: 10px;
  }

  .jump_go .jump_go_right .iconfont {
    font-size: 1.2rem;
    color: #666666;
    margin-left: 10px;
  }

  .jump_go_bottom .jump_go_right .iconfont {
    font-size: 1.2rem;
    color: #666666;
    margin-left: 10px;
  }

  .jump_go input {
    text-align: right;
    border: none;
    width: 100%;
    outline: none;
  }

  .jump_go_bottom input {
    text-align: right;
    border: none;
    width: 100%;
    outline: none;
  }

  ::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #999;
    font-size: 0.9rem;
  }

  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #999;
    font-size: 0.9rem;
  }

  input::-webkit-input-placeholder {
    color: #999;
    font-size: 0.9rem;
  }

  .queren {
    background-color: #eee;
    padding: 20px 10px;
  }

  .queren div {
    height: 40px;
    line-height: 40px;
    background-color: #e6191e;
    color: #ffffff;
    text-align: center;
    border-radius: 5px;
    font-size: 0.9rem;
  }
</style>
